<template>
  <com-page>
    <view class="home-page-root" hover-class="none" hover-stop-propagation="false">
      <com-header title="个人中心"></com-header>
      <view class="baseinfo">
        <img class="avatar" src="https://avatar3.tower.im/0810597304bddd3585c0?t=1733881970" />
        <view class="container">
          <view>
            <text class="name">微信用户 </text>
            <text>(223323232)</text>
          </view>
          <view class="car" hover-class="transparent-bg" hover-stay-time="300" hover-start-time="0">
            <img class="car-icon" :src="CarIcon" alt="">
            查看车型
          </view>
        </view>
      </view>
      <view class="amount-container">
        <view class="amount">
          168.00 <text class="unit">元</text>
        </view>
        <view class='charge'>
          充值
        </view>
      </view>
      <view class="grid">
        <view class="item">
          <img :src="HomeGridWdqbIcon" alt="">
          <view>我的钱包</view>
        </view>
        <view class="item">
          <img :src="HomeGridCdjlIcon" alt="">
          <view>充电记录</view>
        </view>
        <view class="item">
          <img :src="HomeGridFpsqIcon" alt="">
          <view>开票申请</view>
        </view>
      </view>
      <view class="list">
        <view class="item" v-for="item in listConfig" :key="item.title">
          <view class="item-title">
            <image :src="item.icon"></image>
            {{ item.title }}
          </view>
          <view class="value" hover-class="none" hover-stop-propagation="false">
            <text v-if="item.value">{{ item.value }}</text>
            <fui-icon v-else color="#A8A8A8" name="arrowright" :size="46"></fui-icon>
          </view>
        </view>
      </view>
      <view class="login-out">
        <FuiButton color="#000" background="#fff" text="退出登录"></FuiButton>
      </view>
    </view>
    <ComTabbar></ComTabbar>
  </com-page>
</template>

<script setup lang="ts">
import ComPage from "@/components/ComPage/index.vue";
import ComHeader from "@/components/ComHeader/index.vue";
import ComTabbar from "@/components/ComTabbar/index.vue";
import { CarIcon, HomeGridCdjlIcon, HomeGridFpsqIcon, HomeGridWdqbIcon, HomeListGzsbIcon, HomeListYjfkIcon, HomeListKfdhIcon } from "@/static";
import { ref } from "vue";
import FuiIcon from "@/components/FirstUi/fui-icon/fui-icon.vue";
import FuiButton from "@/components/FirstUi/fui-button/fui-button.vue";

const listConfig = ref([
  {
    icon: HomeListGzsbIcon,
    title: "故障上报",
  },
  {
    icon: HomeListYjfkIcon,
    title: "意见反馈",
  },
  {
    icon: HomeListKfdhIcon,
    title: "客服电话",
    value: '029-8888888'
  },
]);

</script>

<style scoped lang="less">
.home-page-root {
  background-image: url("/static/svg/home-bg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;

  .baseinfo {
    display: flex;
    gap: 2vw;
    padding: 0 4vw;
    align-items: stretch;
    margin-top: 7vw;

    .avatar {
      width: 15vw;
      height: 15vw;
      border-radius: 100%;
      border: 3px solid #fff;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      flex: 1;

      .name {
        font-size: 18px;
      }

      .car {
        background: linear-gradient(90deg, #CD9969 0%, #ECD4A6 100%);
        display: flex;
        align-items: center;
        gap: 2vw;
        border-radius: 999px;
        padding: 0.7vw 4vw 0.7vw 2vw;
        font-size: 12px;
        color: #464048;

        .car-icon {
          width: 6vw;
          height: 6vw;
        }
      }
    }
  }

  .amount-container {
    display: flex;
    margin-top: 4vw;
    background-color: rgb(42, 56, 93);
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    margin: 0 4vw;
    margin-top: 4vw;
    padding: 6vw 5vw;

    .amount {
      color: rgb(255, 225, 192);
      font-size: 24px;
      display: flex;
      align-items: baseline;

      .unit {
        font-size: 16px;
      }
    }

    .charge {
      background: linear-gradient(90deg, #F7E5C3 0%, #E2A25C 100%);
      padding: 1vw 4vw;
      color: rgb(42, 56, 93);
      border-radius: 999px;
    }
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 4vw;
    margin-top: 4vw;
    background: #fff;
    padding: 6vw;
    gap: 6vw;
    border-radius: 10px;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2vw;

      image {
        width: 8vw;
        height: 8vw;
      }
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    margin: 0 4vw;
    margin-top: 4vw;
    background: #fff;
    border-radius: 10px;

    .item {
      display: flex;
      align-items: center;
      padding: 4vw 6vw;
      border-bottom: 1px solid #ededed;

      .item-title {
        display: flex;
        align-items: center;
        gap: 3vw;

        image {
          width: 6vw;
          height: 6vw;
        }
      }

      .value {
        flex: 1;
        width: 100%;
        text-align: right;
      }
    }
  }

  .login-out {
    margin-top: 4vw;
    padding: 0 4vw;
  }
}
</style>
